import { h, fragment } from '@knno/dom/jsx';
import { Button } from '../../../dist/jsx/button';
import { Checkbox, UICheckbox } from '../../../dist/jsx/checkbox';
import { Radio } from '../../../dist/jsx/radio';
import { Toggle } from '../../../dist/jsx/toggle';
import { bar } from './index.css';
import SVGUnchecked from '@material-design-icons/svg/filled/check_box_outline_blank.svg';
import SVGChecked from '@material-design-icons/svg/filled/check_box.svg';
export function ShowCheckbox() {
	let chk: UICheckbox;
	return (
		<>
			<h2>多选</h2>
			<div class={bar}>
				<Checkbox text="复选框" />
				<Checkbox text="禁用的复选框" disabled />
				<Checkbox text="三态复选框" checked="half" ref={(c) => (chk = c)} />
				<Button text="恢复为三态" onclick={() => chk.checked('half')} />
			</div>
			<h2>单选</h2>
			<div class={bar}>
				<Radio id="r1" group="r1" text="单选框1" facadeIcons={{ unchecked: SVGUnchecked, checked: SVGChecked }} />
				<Radio id="r2" group="r1" text="单选框2" checked />
				<Radio id="r3" group="r1" text="单选框3" />
				<Radio id="r4" group="r1" text="禁用的单选框4" disabled />
			</div>
			<h2>开关</h2>
			<div class={bar}>
				<Toggle text="开关" />
				<Toggle text="禁用开关" disabled />
			</div>
		</>
	);
}
